<template>
	<view class="content">
		<view class="header">
			<u-search @search="search" @custom="search" placeholder="请输入任务名称" v-model="keyword" shape="round"
				style="background-color: white;"></u-search>
			<uni-segmented-control style="background-color: white; " inActiveColor="#a5a5a5" :current="currentIndex"
				:values="items" @clickItem="onClickItem" styleType="text" activeColor="#007aff" />
		</view>
		<view v-if="this.dataList.length === 0">
			<image src="../../../static/images/u282.svg" style="display: flex; justify-content: center;width: 100%;">
				<view style="display: flex; justify-content: center;font-size: 20px;">当前无任务记录</view>
				<view style="display: flex; justify-content: center;color: #a5a5a5">当前没有找到您的任务记录</view>
			</image>
		</view>
		<view v-else>
			<scroll-view class="scroll-container" style="margin-top: 3%;padding-bottom: 30px;" scroll-y>
				<uni-card :is-shadow="false" style="margin-left: 2%;margin-right: 2%;" v-for="item in dataList"
					:key="item.taskId" :title="item.taskName" :sub-title="item.clientOrderCode"
					:extra="$dict.selectDictLabel('mes_order_status', item.status)" @click="cardClick(item)">
					<uni-row>
						<uni-col >
							<uni-row>
								<uni-col :span="16">
									<view>工单: {{item.workorderCode}}</view>
								</uni-col>
								<uni-col :span="8">
									<view>工艺: {{item.processName}}</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<view>已完成: {{item.quantityQuanlify + ' ' + $convertUnitmeasure(item.unitOfMeasure)}}
								</view>
							</uni-row>
							<uni-row>
								<view>{{convertDate(item.endDate)}}</view>
							</uni-row>
						</uni-col>
					</uni-row>
					<uni-row >
						<uni-col :offset="15">
							<u-button shape="circle" size="mini" style="margin-left: 3px;"
								@click="feedbackClick(item)">上报工时</u-button>
							<u-button shape="circle" size="mini" style="margin-left: 3px;"
								@click="viewRecordsClick(item)">查看记录</u-button>
						</uni-col>
					</uni-row>
				</uni-card>
			</scroll-view>
		</view>
		<view class="pagination-container" >
			<uni-col :span="24">
				<uni-pagination style="margin-left: 2%;margin-right: 2%;" :total="total" :current="pageNum"
					:pageSize="pageSize" @change="change" />
			</uni-col>
		</view>
	</view>
</template>

<script>
	import {
		listFeedback
	} from "@/api/work/feedback/feedback"

	export default {
		data() {
			return {
				queryParam: {},
				dataList: [],
				items: ['全部', '待处理', '已完成'],
				currentIndex: 0,
				pageNum: 1,
				total: 0,
				pageSize: 10,
				keyword: '',
				inActiveColor: '#a5a5a5'
			}
		},
		created() {
			this.list(this.pageNum);
		},
		onShow(){
			this.list(this.pageNum);
		},
		methods: {
			list(pageNum) {
				this.queryParam.pageNum = pageNum;
				this.queryParam.pageSize = this.pageSize;
				// 审核状态,0:全部,1:处理中,2:已处理;
				this.queryParam.currentIndex = this.currentIndex;
				this.queryParam.taskName = this.keyword;
				listFeedback(this.queryParam).then(res => {
					this.dataList = res.rows;
					this.total = res.total;
				})
			},
			search() {
				this.list(1);
			},
			feedbackClick(e) {
				let url = `/pages/work/feedback/detail/detail?taskId=${e.taskId}`;
				this.$tab.navigateTo(url);
			},
			viewRecordsClick(e) {
				let url = `/pages/work/feedback/records?taskId=${e.taskId}`;
				this.$tab.navigateTo(url);
			},
			onClickItem(e) {
				if (this.currentIndex != e.currentIndex) {
					this.currentIndex = e.currentIndex;
					this.list(1);
				}
			},
			change(e) {
				this.list(e.current);
			},
			cardClick(e) {
				let url = `/pages/work/feedback/records?taskId=${e.taskId}`;
				this.$tab.navigateTo(url);
			},
			convertDate(date) {
				return '交付日期: ' + this.$dayjs(date).format('YYYY-MM-DD');
			}
		}
	}
</script>

<style lang="scss">
	.row-margin uni-view {
		margin-top: 2px;
	}

	::v-deep .uni-card .uni-card__header .uni-card__header-extra .uni-card__header-extra-text {
		color: #7cabf2;
		font-size: 12px;
	}

	::v-deep .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
		font-size: 15px;
		font-weight: bold;
		color: #3a3a3a;
	}
</style>